<template>
	<div class='home_container'>
		<div class='top'>
			<div class='left'>
				<Suspense>
					<template v-slot>
						<SystemNotice/>
					</template>
					<template v-slot:fallback>
						<Loading/>
					</template>
				</Suspense>
			</div>
			<div class='right'>
				<Suspense>
					<template v-slot>
						<!--木有东西-->1
					</template>
					<template v-slot:fallback>
						<Loading/>
					</template>
				</Suspense>
			</div>
		</div>
		<div class='bottom'>
			<div class='left'><!--还是木有东西--></div>
			<div class='right'><!--嗷呜,你把东西藏哪了?--></div>
		</div>
	</div>
</template>
<script lang='ts' setup>
import { defineAsyncComponent, onMounted } from 'vue';
const Loading = defineAsyncComponent(() => import('@/components/customComponents/loading/Loading11.vue'));
const SystemNotice = defineAsyncComponent(() => import('@/components/page/home/systemNotice/SystemNotice.vue'));
/*'backlog'       : defineAsyncComponent(() => import('@/components/page/home/center/left/Backlog.vue')),
 'navMenu'       : defineAsyncComponent(() => import('@/components/page/home/center/right/navMenu.vue')),
 'line-charts'   : defineAsyncComponent(() => import('@/components/page/home/bottom/LineCharts.vue')),
 'pie-charts'    : defineAsyncComponent(() => import('@/components/page/home/bottom/PieCharts.vue'))*/
onMounted(() => {
});
</script>
<style lang='scss' scoped>
.home_container{
	box-sizing            :border-box;
	margin                :0;
	padding               :.5%;
	border                :0;
	border-radius         :8px;
	height                :100%;
	width                 :100%;
	font-size             :20px;
	display               :flex;
	flex-flow             :column nowrap;
	place-content         :flex-start flex-start;
	place-items           :center center;
	place-self            :center center;
	gap                   :2% 1%;
	background-color      :rgba(229, 246, 253, .6);
	background-attachment :fixed;
	background-repeat     :no-repeat;
	background-size       :100% 100%;
	.top{
		box-sizing    :border-box;
		margin        :0;
		padding       :0;
		border        :0;
		border-radius :8px;
		height        :50%;
		width         :100%;
		display       :flex;
		flex-flow     :row nowrap;
		place-content :flex-start flex-start;
		place-items   :center center;
		place-self    :center center;
		gap           :1% 1%;
		.left{
			box-sizing       :border-box;
			margin           :0;
			padding          :0;
			border           :0;
			border-radius    :8px;
			height           :100%;
			width            :50%;
			display          :flex;
			flex-flow        :column nowrap;
			place-content    :flex-start flex-start;
			place-items      :center center;
			place-self       :center center;
			background-color :rgba(255, 255, 255, .6);
		}
		.right{
			box-sizing       :border-box;
			margin           :0;
			padding          :0;
			border           :0;
			border-radius    :8px;
			height           :100%;
			width            :50%;
			display          :flex;
			flex-flow        :column nowrap;
			place-content    :flex-start flex-start;
			place-items      :center center;
			place-self       :center center;
			background-color :rgba(255, 255, 255, .6);
		}
	}
	.bottom{
		box-sizing    :border-box;
		margin        :0;
		padding       :0;
		border        :0;
		border-radius :8px;
		height        :50%;
		width         :100%;
		display       :flex;
		flex-flow     :row nowrap;
		place-content :flex-start flex-start;
		place-items   :center center;
		place-self    :center center;
		gap           :1% 1%;
		.left{
			box-sizing       :border-box;
			margin           :0;
			padding          :0;
			border           :0;
			border-radius    :8px;
			height           :100%;
			width            :50%;
			display          :flex;
			flex-flow        :column nowrap;
			place-content    :flex-start flex-start;
			place-items      :center center;
			place-self       :center center;
			background-color :rgba(255, 255, 255, .6);
		}
		.right{
			box-sizing       :border-box;
			margin           :0;
			padding          :0;
			border           :0;
			border-radius    :8px;
			height           :100%;
			width            :50%;
			display          :flex;
			flex-flow        :column nowrap;
			place-content    :flex-start flex-start;
			place-items      :center center;
			place-self       :center center;
			background-color :rgba(255, 255, 255, .6);
		}
	}
}
/*滚动条样式*/
::-webkit-scrollbar{
	display :none;
}
::-webkit-scrollbar-thumb{
	display :none;
}
::-webkit-scrollbar-track{
	display :none;
}
</style>